/* eslint no-underscore-dangle: 0 */
import React, { PureComponent } from 'react';
// eslint-disable-next-line import/no-duplicates
import targetImg from '@/assects/images/ren.png';
// eslint-disable-next-line import/no-duplicates
import targetImgL from '@/assects/images/ren.png';
import { AREA_MAP_LEFT, AREA_MAP_RIGHT } from './AreaMap';
import { Message } from '@alifd/next';
import { paddingList } from '@/utils/utils';
import styles from './index.module.scss';
import classnames from 'classnames';


const CANVAS_WIDTH = 200;
const CANVAS_HEIGHT = 300;


export default class PockCanvas extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
            pokeList: [
                { position: '头部', times: 0, list: paddingList([]) },
                { position: '左胸', times: 0, list: paddingList([]) },
                { position: '右胸', times: 0, list: paddingList([]) },
                { position: '左臂', times: 0, list: paddingList([]) },
                { position: '右臂', times: 0, list: paddingList([]) },
                { position: '左腹', times: 0, list: paddingList([]) },
                { position: '右腹', times: 0, list: paddingList([]) },
            ],
        };
        this.init = this.init.bind(this);
        this.drawBgImg = this.drawBgImg.bind(this);
        this.drawArea = this.drawArea.bind(this);
        this.clearScreen = this.clearScreen.bind(this);
        this.getAreaByPrecent = this.getAreaByPrecent.bind(this);
        this.doKill = this.doKill.bind(this);
    }

    componentDidMount() {
        if (!this.props.uniqueName) {
            Message.error('缺少uniqueName');
        }
        this.init();
    }

  init = async () => {
      await this.drawBgImg();
  }

  drawBgImg = () => new Promise((resolve) => {
      const img = new Image();
      img.src = this.props.type === 'blue' ? targetImg : targetImgL;
      const ctx = this.getCtx();
      img.onload = function () {
          ctx.drawImage(img, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
          resolve();
      };
  })

  translateCenter = () => {

  }


  getAreaByPrecent = (item) => {
      const x = item.x * CANVAS_WIDTH;
      const y = item.y * CANVAS_HEIGHT;
      const r = (item.r - item.x) * CANVAS_WIDTH;

      return {
          x, y, r,
      };
  }
  getCtx = () => {
      const c = document.getElementById(`mycanvas${this.props.uniqueName}`);
      const ctx = c.getContext('2d');
      // ctx.globalCompositeOperation = 'destination-out';

      return ctx;
  }


  drawArea = (item) => {
      const { type } = this.props;
      return new Promise((resolve) => {
          const ctx = this.getCtx();
          ctx.globalCompositeOperation = 'source-atop';

          const radgrad = ctx.createRadialGradient(item.x, item.y, 0, item.x, item.y, item.r);
          if (type === 'red') {
              radgrad.addColorStop(0, 'rgba(255,0,0,0.8)');
              radgrad.addColorStop(1, 'rgba(255,0,0,0.2)');
          } else {
              radgrad.addColorStop(0, 'rgba(0,0,255,1)');
              radgrad.addColorStop(1, 'rgba(0,0,255,0.3)');
          }


          // ctx.fillStyle = 'blue';
          ctx.fillStyle = radgrad;
          ctx.beginPath();
          // ctx.fillRect(item.x, item.y, item.width, item.height);
          ctx.arc(item.x, item.y, item.r, 0, 2 * Math.PI, false);
          ctx.closePath();
          ctx.fill();

          resolve();
      });
  }

  clearScreen = async () => {
      await this.drawBgImg();
  }

  doKill = async (type) => {
      await this.clearScreen();
      let kind = '';

      if (this.props.type === 'blue') {
          switch (type) {
          case 1:
              kind = AREA_MAP_RIGHT.HEAD;
              break;
          case 2:
              kind = AREA_MAP_RIGHT.LEFT_CHEST;
              break;
          case 3:
              kind = AREA_MAP_RIGHT.Right_CHEST;
              break;
          case 4:
              kind = AREA_MAP_RIGHT.LEFT_ARM;
              break;
          case 5:
              kind = AREA_MAP_RIGHT.Right_ARM;
              break;
          case 6:
              kind = AREA_MAP_RIGHT.LEFT_ABDOMEN;
              break;
          case 7:
              kind = AREA_MAP_RIGHT.Right_ABDOMEN;
              break;
          default:
              break;
          }
      } else {
          switch (type) {
          case 1:
              kind = AREA_MAP_LEFT.HEAD;
              break;
          case 2:
              kind = AREA_MAP_LEFT.LEFT_CHEST;
              break;
          case 3:
              kind = AREA_MAP_LEFT.Right_CHEST;
              break;
          case 4:
              kind = AREA_MAP_LEFT.LEFT_ARM;
              break;
          case 5:
              kind = AREA_MAP_LEFT.Right_ARM;
              break;
          case 6:
              kind = AREA_MAP_LEFT.LEFT_ABDOMEN;
              break;
          case 7:
              kind = AREA_MAP_LEFT.Right_ABDOMEN;
              break;
          default:
              break;
          }
      }

      let list = kind ? [kind] : [];// 支持同时显示多个部位

      list = list.map(item => this.getAreaByPrecent(item));

      list.forEach(((item) => {
          this.drawArea(item);
      }));
  }

  render() {
      const { type } = this.props;
      const { count, pokeList } = this.state;
      return (
          <div className="filter-table">

              <div className="flex" >
                  {
                      type === 'red' ?
                          <div className={classnames('flex align-items ma', styles.alltime)} >
                              <span> 总<br />次<br />数:</span>

                              <span className={classnames('red', styles.count)} >{count}</span>
                          </div>
                          : null
                  }
                  <div className="box justify-center flex" >
                      <canvas id={`mycanvas${this.props.uniqueName}`} width={CANVAS_WIDTH} height={CANVAS_HEIGHT}>
              Your browser does not support the canvas element.

                      </canvas>
                  </div>

                  {
                      type === 'blue' ?
                          <div className={classnames('flex align-items ma', styles.alltime)} >
                              <span> 总<br />次<br />数:</span>

                              <span className={classnames('blue', styles.count)} >{count}</span>
                          </div>
                          : null
                  }
              </div>

              <table className={classnames(styles.table, type === 'blue' ? 'blue' : 'red')} >
                  <tr>
                      <td />
                      <td>击中次数</td>
                      <td>力量</td>
                  </tr>
                  {
                      pokeList.map(poke => (<tr key={poke.position} >
                          <td >{poke.position}</td>
                          <td>{poke.times}</td>
                          <td>{poke.list.map((i, index) => <span className="mr" key={index} >{i}</span>)}
                          </td>
                      </tr>))
                  }

              </table>

              {/* <div>
          <div onClick={this.clearScreen} >
            清屏
          </div>
          <div onClick={() => { this.doKill('头部'); }} >
            刺杀1
          </div>
          <div onClick={() => { this.doKill('左臂'); }} >
            刺杀2
          </div>
          <div onClick={() => { this.doKill('右臂'); }} >
            刺杀3
          </div>
        </div> */}


          </div>
      );
  }
}
